<template>
    <page-body>
        <view class="page">
            <view class="flex benben-position-layout flex flex-wrap align-center jfmx_flex_0_ibhf" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
                <view class='flex flex-wrap align-center justify-between flex-sub jfmx_fd0_0_ibhf'>
                    <view class='flex flex-wrap align-center jfmx_fd0_0_c0_ibhf' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
                        <text class='fu-iconfont2  jfmx_fd0_0_c0_c0_ibhf'>&#xE794;</text>
                    </view>
                    <view class='flex flex-wrap align-stretch justify-center'>
                        <text class='jfmx_fd0_0_c1_c0_ibhf'>积分明细</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-end jfmx_fd0_0_c0_ibhf'>
                        <text class='fu-iconfont2' @tap.stop="showPop">&#xe756;</text>
                    </view>
                </view>

            </view>
            <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
            <!---flex布局flex布局开始-->
            <view class="flex benben-flex-layout flex-wrap align-center jfmx_flex_1_ibhf">
                <view>
                    <benben-flex-tabs class-name='jfmx_benbenTabsfd1_0_ibhf' v-model="tab" ref="benben_tabsfd1_0" select-mark="benben_tabsfd1_0" key="benben_tabsfd1_0" :open-title-type='false' :open-sticky='true' :top='0' :is-show-content='false' :scrollspy='false' :tabs-info.sync="tabsInfofd1_0">

                        <scroll-view @scroll="tabsInfofd1_0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd1_0" class="benben-tabs" style="width:750rpx" :scroll-x="true" :scroll-left="tabsInfofd1_0.moveX" scroll-with-animation="all .3s ease" :show-scrollbar='false' :enhanced="true">
                            <view class="benben-tabs-content" id="benben_tabsfd1_0-content">
                                <view id="benben_tabsfd1_0-title" class="benben-tabs-title flex flex align-center justify-around">
                                    <view :class="{ 'checkTitlefd1_0_ibhf': tab == '1', 'flex flex-wrap align-center jfmx_titlefd1_0_c4_ibhf': true }" @tap="check(1)" :id="`benben_tabsfd1_0-title-item-${'1'}`">

                                        <text>全部</text>

                                    </view>
                                    <view :class="{ 'checkTitlefd1_0_ibhf': tab == '2', 'flex flex-wrap align-center jfmx_titlefd1_0_c4_ibhf': true }" @tap="check(2)" :id="`benben_tabsfd1_0-title-item-${'2'}`">

                                        <text>加分</text>

                                    </view>
                                    <view :class="{ 'checkTitlefd1_0_ibhf': tab == '3', 'flex flex-wrap align-center jfmx_titlefd1_0_c4_ibhf': true }" @tap="check(3)" :id="`benben_tabsfd1_0-title-item-${'3'}`">

                                        <text>减分</text>

                                    </view>
                                </view>
                                <view :style="{ left: tabsInfofd1_0.lineleft, maxWidth: tabsInfofd1_0.lineWidth ,}" id="benben_tabsfd1_0-line" class="benben-tabs-line flex benben-flex-tabs-line jfmx_linefd1_0_ibhf" :class="{'benben-tabs-line-active':tabsInfofd1_0.isInit}"></view>
                            </view>
                        </scroll-view>

                    </benben-flex-tabs>

                </view>
                <view class='flex flex-direction flex-wrap align-stretch flex-sub jfmx_fd1_1_ibhf'>
                    <view class='flex flex-wrap align-center justify-between jfmx_fd1_1_c0_ibhf' v-for="(item,index) in list" :key='index'>
                        <view class='flex flex-direction flex-wrap align-stretch'>
                            <text class='jfmx_fd1_1_c0_c0_c0_ibhf'>{{item.type}}</text>
                            <text class='jfmx_fd1_1_c0_c0_c1_ibhf'>{{item.create_time}}</text>
                        </view>
                        <view class='flex flex-wrap align-center'>
							<text v-if="item.amount>0" class="jfmx_fd1_1_c1_c1_c0_ibhf">+</text>
							<text :class='item.amount>0?"jfmx_fd1_1_c1_c1_c0_ibhf":"jfmx_fd1_1_c0_c1_c0_ibhf"'>{{item.amount}}</text>
                        </view>
                    </view>
					<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
											:listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
                  
                </view>
            </view>

            <!---flex布局flex布局结束-->
			<benben-popup v-model="popupShow1728455694729" :mask="true" :mask-close-able="true" mode='bottom'
				:z-index='9999'>
				<!---flex布局flex布局开始-->
				<view class="flex benben-flex-layout flex-wrap align-center ranking_flex_4">
					<view class='flex flex-wrap align-center justify-between ranking_fd4_0'>
						<text class='ranking_fd4_0_c0' @tap.stop="popupShow1728455694729=false">{{$t('取消')}}</text>
						<text class='ranking_fd4_0_c1'>{{$t('日期选择')}}</text>
						<text class='ranking_fd4_0_c2' @tap.stop=submit>{{$t('确定')}}</text>
					</view>
					<benben-calendar-diy @change="change" mode='range' year-arrow-color='#666666'
						month-arrow-color='#666666' start-text=' ' end-text=' ' :change-title='true' :change-year='true'
						:change-month='true' class=" ranking_fd4_1"></benben-calendar-diy>
				</view>
			</benben-popup>

        </view>
    </page-body>
</template>
<script>
	import pagingList from '@/common/mixin/paging_list.js';
    export default {
        components: {},
		mixins: [pagingList],


        data() {
            return {
                "tabsInfofd1_0": {
                    lineleft: '',
                    lineWidth: '',
                    moveX: 0,
                    scrollX: 0,
                    PageScrollX: 0,
                    isInit: false
                },
                "tab": "1",
				course_id:'',//课程id
				points:'',//积分
				name:'',//课程名字
				list:[],
			    sign:'',//1加分 2减分
				date:'',
				"popupShow1728455694729": false,
				params: {
					start_time: '',
					end_time: ''
				}
            };
        },
        computed: {

        },
        watch: {},
        onLoad(options) {
			this.course_id=options.id
			this.points=options.points
			this.name=options.name
			this.getlists()
        },
        onUnload() {

        },
        onReady() {

        },
        onShow() {

        },
        onHide() {

        },
        onResize() {

        },
        onPullDownRefresh() {
			this.getlists()
        },
        onReachBottom(e) {

        },
        onPageScroll(e) {

        },
        methods: {
			showPop() {
				this.popupShow1728455694729 = true
				this.params.end_time = ''
				this.params.start_time = ''
			},
			change(val) {
				this.params.end_time = val.end
				this.params.start_time = val.start
			},
			submit() {
				this.popupShow1728455694729 = false
				this.getlists()
			},
			check(type){
				this.tab=type
				this.sign=type==1?0:type==2?1:2
				this.getlists()
			},
			async getlists() {
				// let datadatum = await this.$api.get(global.apiUrls.post69168c2d01b8d, {
				// 	course_id:this.course_id
				// });
				// //
				// if (datadatum.data.code != 1) {
				// 	this.$message.info(datadatum.data.msg);
				// 	return
				// }
				//  // this.isup = true
				// let infodatum = datadatum.data;
				// this.list = infodatum.data.data
				// return
				this.minixPagingListsApi = global.apiUrls.post69168c2d01b8d;
				this.pageingListApiMethod ='post';
				this.allowOnloadGetList = false;
				if(this.params.end_time && this.params.start_time){
					this.date=this.params.start_time +' - ' + this.params.end_time
				}
				
				this.pagingListPostDataContent ={
					course_id:this.course_id,
					sign:this.sign,
					date:this.date,
				}
				
				this.listData = [];
				this.list = this.listData;
				this.pagingListToggle();
				this.$forceUpdate()
			},
			pagingListPostData() {
				return this.pagingListPostDataContent
			}
        }
    };
</script>
<style lang="scss" scoped>
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        background: #F8F8F8;
        background-size: 100% auto;

        .jfmx_flex_1_ibhf {
            margin: 0rpx 0rpx 0rpx 0rpx;

            .checkTitlefd1_0_ibhf {
                font-weight: 700 !important;
                font-size: 28rpx !important;
                color: #333 !important;
                background-color: rgba(255, 255, 255, 1) !important;
            }

            .jfmx_linefd1_0_ibhf {
                width: 100rpx;
                height: 8rpx;
                top: 80rpx;
                background: rgba(20, 94, 253, 1);
                background-size: 100% auto !important;
            }

            .jfmx_fd1_1_ibhf {
                margin: 20rpx 0rpx 0rpx 0rpx;
                padding: 0rpx 32rpx 0rpx 32rpx;
                background: var(--benbenbgColor1);
                background-size: 100% auto;
            }
        }

        .jfmx_titlefd1_0_c4_ibhf {
            color: rgba(153, 153, 153, 1);
        }

        .jfmx_fd1_1_c0_ibhf {
            height: 153rpx;
            padding: 32rpx 0rpx 32rpx 0rpx;
            border-bottom: 1px solid rgba(238, 238, 238, 1);
        }

        .jfmx_fd1_1_c0_c0_c0_ibhf {
            color: #333333;
            font-size: 28rpx;
            font-weight: 500;
            line-height: 53rpx;
            text-align: left;
            font-style: normal;
        }

        .jfmx_fd1_1_c0_c0_c1_ibhf {
            margin: auto 0rpx 0rpx 0rpx;
        }

        .jfmx_fd1_1_c0_c1_c0_ibhf {
            color: #333333;
            font-size: 32rpx;
            font-weight: 700;
            line-height: 45rpx;
            text-align: right;
            font-style: normal;
        }

        .jfmx_fd1_1_c1_c1_c0_ibhf {
            color: rgba(255, 64, 64, 1);
            font-size: 32rpx;
            font-weight: 700;
            line-height: 45rpx;
            text-align: right;
            font-style: normal;
        }

        .jfmx_flex_0_ibhf {
            width: 750rpx;
            height: 88rpx;
            overflow: hidden;
            z-index: 10;
            top: 0rpx;
            background: #fff;
            background-size: 100% auto !important;

            .jfmx_fd0_0_ibhf {
                padding: 0rpx 32rpx 0rpx 32rpx;

                .jfmx_fd0_0_c1_c0_ibhf {
                    font-size: 36rpx;
                    font-weight: 700;
                    color: #333333;
                    line-height: 50rpx;
                }
            }
        }

        .jfmx_fd0_0_c0_ibhf {
            width: 120rpx;

            .jfmx_fd0_0_c0_c0_ibhf {
                font-size: 36rpx;
                color: #333;
            }
        }
    }

    ::v-deep .jfmx_benbenTabsfd1_0_ibhf {
        width: 750rpx;
        height: 90rpx;
        white-space: nowrap;
        background: #fff;
        text-align: center;
    }
	.ranking_flex_4 {
		margin: 300rpx 0rpx 0rpx 0rpx;
		.ranking_fd4_1 {
			background: #ffffff;
			width: 750rpx;
			--range-bg-color: rgba(41, 121, 255, 0.13);
			--active-bg-color: rgba(41, 121, 255, 1);
		}
		.ranking_fd4_0_c2 {
			color: rgba(20, 94, 253, 1);
			font-size: 32rpx;
			font-weight: 500;
		}
		
		.ranking_fd4_0_c1 {
			font-size: 36rpx;
			color: #333;
			font-weight: 500;
		}
		
		.ranking_fd4_0_c0 {
			color: rgba(191, 191, 191, 1);
			font-size: 32rpx;
			font-weight: 500;
		}
		
		.ranking_fd4_0 {
			// background: var(--benbenbgColor1);
			background-color: #fff !important;
			width: 100%;
			height: 122rpx;
			background-size: 100% auto;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			padding: 0rpx 32rpx 0rpx 32rpx;
		}
	}
	
</style>